<!DOCTYPE html>
<html class="no-js" lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title> #required_css

</head>
<body>
#loading
<div class="app $!layout">
    <section class="layout">
        <!-- 内容主体 -->
        <section class="main-content">
            <div class="content-wrap">
                <div class="wrapper">
                    <h4>使用说明</h4>
                    <ul>
                        <li>引入 <code>/framework/js/form/validator.js</code></li>
                        <li>在form节点上增加 <code>class="parsley-form"</code> 和 <code>data-parsley-validate</code></li>
                        <li>在表单元素上 <code>表1（底部）</code> 中的属性</li>
                        <li>在提交按钮上增加 <code>btn-parsley</code></li>
                    </ul>
                    <div class="hr-line-dashed"></div>
                    <h4>示例</h4>
                    <form id="userAddForm" role="form" class="parsley-form" data-parsley-validate action="#"
                          method="get">
                        <div class="row">
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">必填项</label>
                                    <input type="text" class="form-control" data-parsley-required="true">
                                </div>
                            </div>
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">不可输入空字符</label>
                                    <input type="text" class="form-control" data-parsley-notblank>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">限制最小值</label>
                                    <input type="text" class="form-control" data-parsley-min="10">
                                </div>
                            </div>
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">限制最大值</label>
                                    <input type="text" class="form-control" data-parsley-max="10">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">限制范围值</label>
                                    <input type="text" class="form-control" data-parsley-range="[10,100]">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">密码</label>
                                    <input type="text" class="form-control" id="pwd1" data-parsley-required="true">
                                </div>
                            </div>
                            <div class="col-lg-5 col-xs-5">
                                <div class="form-group">
                                    <label class="control-label">确认密码</label>
                                    <input type="text" class="form-control" data-parsley-required="true" data-parsley-equalto="#pwd1">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group text-center">
                                <label></label>

                                <div>
                                    <button class="btn btn-primary btn-lg btn-parsley" data-loading-text="正在提交...">提 交
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <h5>表1</h5>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th style="width: 20%;">名称</th>
                            <th style="width: 40%;">属性配置</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><a name="psly-validator-required"></a>必填</td>
                            <td>
                                <table class="table-stripped hundred" width="182">
                                    <tbody>
                                    <tr>
                                        <td><code>data-parsley-required</code></td>
                                    </tr>
                                    <tr>
                                        <td><code>data-parsley-required="true"</code></td>
                                    </tr>
                                    <tr>
                                        <td><code>data-parsley-required="false"</code></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td>字段为必填项，如果配置 <code>data-parsley-required="false"</code>, 这个字段就不是必填项.</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-email"></a>邮件地址</td>
                            <td><code>data-parsley-type="email"</code></td>
                            <td>验证数据类型为邮箱地址</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-number"></a>数字</td>
                            <td><code>data-parsley-type="number"</code></td>
                            <td>必须是数字（包含整数、负数、浮点数）</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-integer"></a>整数</td>
                            <td><code>data-parsley-type="integer"</code></td>
                            <td>必须是整数（不包含负数、小数）</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-digits"></a>浮点数</td>
                            <td><code>data-parsley-type="digits"</code></td>
                            <td>必须是浮点数字</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-alphanum"></a>数字或字母</td>
                            <td><code>data-parsley-type="alphanum"</code></td>
                            <td>必须是数字或者字母</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-url"></a>URL地址</td>
                            <td><code>data-parsley-type="url"</code></td>
                            <td>必须是一个有效的URL地址，http开头</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-minlength"></a>最小长度</td>
                            <td><code>data-parsley-minlength="6"</code></td>
                            <td>限制最小长度</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-maxlength"></a>最大长度</td>
                            <td><code>data-parsley-maxlength="6"</code></td>
                            <td>限制最大长度</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-length"></a>长度</td>
                            <td><code>data-parsley-length="[6, 10]"</code></td>
                            <td>长度在最小和最大之间</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-min"></a>小于</td>
                            <td><code>data-parsley-min="6"</code></td>
                            <td>输入的值必须小于等于设定值</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-max"></a>大于</td>
                            <td><code>data-parsley-max="6"</code></td>
                            <td>输入的值必须大于等于设定值</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-range"></a>值范围</td>
                            <td><code>data-parsley-range="[6,10]"</code></td>
                            <td>输入的值必须在最大和最小范围内，包含最小和最大值</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-pattern"></a>正则格式</td>
                            <td><code>data-parsley-pattern="\d+"</code></td>
                            <td>输入值必须符合设定的正则表达式</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-mincheck"></a>最小选择项数</td>
                            <td><code>data-parsley-mincheck="3"</code></td>
                            <td>最少选择设定值项数</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-maxcheck"></a>最多选择</td>
                            <td><code>data-parsley-maxcheck="3"</code></td>
                            <td>最多选择设定值项数</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><code>data-parsley-check="[1, 3]"</code></td>
                            <td>选择的项数应该在最小值和最大值之间，包含最小和最大值</td>
                        </tr>
                        <tr>
                            <td><a name="psly-validator-equalto"></a>等于</td>
                            <td><code>data-parsley-equalto="#anotherfield"</code></td>
                            <td>输入值，与#anotherfield值相同</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a class="exit-offscreen"></a>
        </section>
    </section>
</div>
#required_js

<!-- 页面组件脚本 -->

<script type="text/javascript">
    ns.ready(function () {
        ns.requireJS("/framework/js/form/validator.js");
    });
</script>

#loading_close
</body>
</html>
